<html>
<head>
    <meta charset="utf-8">
    <meta name="author" content="JZH">
    <script src="js/jquery-3.1.1.js"></script>
    <title>点击事件</title>
<style>
     #outer{
         width: 300px;
         height: 100px;
         margin: 10px;
         display: flex;
         justify-content: center; 
         align-content: center;
         }  
     div{
         width: 80px;
         height: 40px;
         float: left;
         margin: 10px;
         text-align: center;
         font-size: 14px;
         color: deepskyblue;
         border-radius: 5px;
         background-color: #eee;
    }
    .border{
        border:1px solid deepskyblue;
    }
</style>
</head>
<body>
   <section id="outer">
       <div><p>1</p></div>
       <div><p>2</p></div>
       <div><p>3</p></div>
   </section>     
</body>
<html>
<script>
 $(document).ready(function(){
    var div = $('div');
    // div.click(function(){
    //     if($(this).attr('isSelector') == 'true'){
    //     //当前元素被选中,需要改为不被选中,此时,移除类名,把isSelector=false 
    //       $(this).removeClass('border').attr('isSelector','false');
    //     }else{
    //         // 不选中
    //         //当被选中的时候添加属性 isSelector = true 
    //         $(this).addClass('border').attr('isSelector','true')
    //         // 当不被选中的时候,添加属性 isSelector=false
    //         .siblings().removeClass('border');
    //     }
    // });

//  .each() 让集合中的每一元素都执行一次each方法,类似for循环
    $('div').each(function(index){
        // index 集合中每一个元素对应的索引值
        // console.log('==' + index);
        // console.log(this);
        $(this).click(function(){
            $(this)
            .toggleClass('border')
            .siblings().removeClass('border');
        });
    });
 });
</script>